import React, {PropTypes} from "react";
import {connect} from "react-redux";
import CommonTitle from "../../components/CommonTitle";
import {Link} from "react-router";
import {fetchPosts} from "../../actions";
import pingpp from "pingpp-js";
import cookie from "react-cookie";

class orderPay extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isPost: false,
            zhiFuBaoChecked: true,
            weiXinChecked: false,
            paymentChannel: 1,
            orderId:''
        }
    }
    componentWillMount() {
        document.title="选择付款方式";
    }
    componentDidMount() {
        document.body.className="pay-body";
        const orderId = this.props.location.query.orderId;
        this.setState({orderId: orderId});
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.paymentData.errorCode == 0) {
            pingpp.createPayment(nextProps.paymentData.data.chargeObj, this.payCallBack);
        } else {
            if (nextProps.paymentData.errorCode && nextProps.paymentData.errorCode != 0) {
                alert("支付失败，请稍后再试");
            }
            this.setState({isPost: false});
        }


    }
    componentWillUnmount() {
        document.body.className="common-body";
    }

    payCallBack(result, err) {
        console.log("--------------result: " + result);
        console.log("---------------err: " + err);

    }

    updateRadioChecked(payIndex) {
        if(payIndex == 1) {
            this.setState({zhiFuBaoChecked:true, weiXinChecked:false, paymentChannel: payIndex});
        } else {
            this.setState({zhiFuBaoChecked:false, weiXinChecked:true, paymentChannel: payIndex});
        }
    }
    goToPay() {
        if(!this.state.isPost) {
            const header = {"X-Client-ID": '123456', "X-Long-Token": cookie.load("token")};
            const orderParams = {orderId: this.state.orderId, paymentChannel: this.state.paymentChannel};
            this.props.dispatch(fetchPosts("paymentData", header, orderParams));
            this.setState({isPost: true});
        }
    }

    render() {
        return(
            <div>
                <div className="pay-kong"/>
                <ul>
                    <li>
                        <div className="pay-type-list" onClick={this.updateRadioChecked.bind(this, 1)}>
                            <div className="pay-type-box" style={{marginTop: '25px'}}>
                                <input type="radio" value="1" id="checkboxFourInput1" name="payType" checked={this.state.zhiFuBaoChecked}/>
                                <label for="checkboxFourInput2"></label>
                            </div>
                            <div className="pay-type-text">
                                <p>支付宝</p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div className="pay-type-list" onClick={this.updateRadioChecked.bind(this, 3)}>
                            <div className="pay-type-box" style={{marginTop: '25px', marginLeft: '-39px'}}>
                                <input type="radio" value="1" id="checkboxFourInput2" name="payType" checked={this.state.weiXinChecked}/>
                                <label for="checkboxFourInput2"></label>
                            </div>
                            <div className="pay-type-text">
                                <p>微支付</p>
                            </div>
                        </div>
                    </li>
                </ul>

                <div className="pay-button">
                    <Link onClick={this.goToPay.bind(this)}>去支付</Link>
                </div>
            </div>
        )
    }
}

orderPay.propTypes = {
    isFetching: PropTypes.bool.isRequired,
    dispatch: PropTypes.func.isRequired
}
orderPay.contextTypes = {
    router:React.PropTypes.object
}

function mapStateToProps(state){
    const { postsByApi } = state
    const {
        isFetching,
        items: paymentData
    } = postsByApi["paymentData"] || {
        isFetching: false,
        items: {}
    }
    return {
        paymentData,
        isFetching
    }
}
export default connect(mapStateToProps)(orderPay);

